<div w-i18n-ns="app.wallet.leasing" class="leasing-page">
    <div class="left-panel">
        <w-leasing-block class="noheader margin-1">
            <div>
                <div class="center basic-500 margin-05 body-2">
                    <span w-i18n="chart.title"></span>
                </div>
                <div class="balance-container text-center margin-4">
                    <w-balance money="$ctrl.total"></w-balance>
                </div>
                <div class="chart-wrapper margin-3">
                    <w-circle-chart options="$ctrl.chartOptions" data="$ctrl.chartData"></w-circle-chart>
                </div>
                <div class="legend-container margin-2">
                    <div ng-repeat="legend in $ctrl.chartData track by legend.id"
                         ng-if="!legend.value.getTokens().eq(0)"
                         class="legend-item">
                        <div class="part basic-500 footnote-1">
                            <div class="legend-color margin-right-1"
                                 style="background-color: {{::$ctrl.chartOptions.items[legend.id].color}}"></div>
                            <span w-i18n="{{::legend.id}}"></span>
                        </div>
                        <div class="part">
                            <w-balance money="legend.value"></w-balance>
                        </div>
                    </div>
                </div>
                <w-analytics event="'Leasing Start Click'" event-target="'ui'">
                    <w-button class="submit long medium" on-click="$ctrl.startLeasing()">
                        <span w-i18n="chart.create"></span>
                    </w-button>
                </w-analytics>
            </div>
        </w-leasing-block>

        <w-expandable-block title="'description.title'">
            <div class="footnote-1 basic-500" w-i18n="description.text1"></div>
            <div class="description-split"></div>
            <div class="icon-description footnote-1 basic-500" w-i18n="description.text2"></div>
            <div class="description-split"></div>
            <div class="footnote-1 basic-500 margin-1" w-i18n="description.text3"></div>
            <a class="link"
               target="_blank"
               rel="noopener noreferrer"
               ng-href="{{::$ctrl.nodeListLink}}">
                <span w-i18n="nodeListLink"></span>
            </a>
        </w-expandable-block>

    </div>
    <div class="transactions-container">
        <div w-i18n-ns="app.ui" class="controls margin-1">
            <w-radio-wrap class="split-mode interface" ng-model="$ctrl.filter">
                <w-radio value="'all'">
                    <span w-i18n="all"></span>
                </w-radio>
                <w-radio value="'active'">
                    <span w-i18n="transaction.headers.activeLeasing"></span>
                </w-radio>
                <w-radio value="'canceled'">
                    <span w-i18n="transaction.headers.canceled"></span>
                </w-radio>
            </w-radio-wrap>
        </div>
        <w-scroll-box>
            <div class="scroll-list">
                <w-transaction-list transaction-date-pattern="dd.MM.yyyy HH:mm"
                                    pending="$ctrl.pending"
                                    parent-selector="w-scroll-box"
                                    transactions="$ctrl.transactions"></w-transaction-list>
                <div class="fake-transaction-line" ng-if="$ctrl.pendingAllLeasing">
                    <w-loader></w-loader>
                </div>
            </div>
        </w-scroll-box>
    </div>
</div>
